Skip to main content

Variant Image Tagging Examples

Real-World Example: T-Shirt Store​

Product Setup​

Product: "Classic Cotton T-Shirt"
Variants:

  • Red / Small
  • Red / Medium
  • Red / Large
  • Blue / Small
  • Blue / Medium
  • Blue / Large

Images Needed​

  • 4 images per color (8 total images)
  • Front view, back view, model shot, detail shot for each color

Alt Text Setup​

Red Images​

Image 1: "Red t-shirt front view variant-red-small"
Image 2: "Red t-shirt back view variant-red-small"  
Image 3: "Red t-shirt on model variant-red-small"
Image 4: "Red t-shirt fabric detail variant-red-small"

Blue Images​

Image 5: "Blue t-shirt front view variant-blue-small"
Image 6: "Blue t-shirt back view variant-blue-small"
Image 7: "Blue t-shirt on model variant-blue-small"  
Image 8: "Blue t-shirt fabric detail variant-blue-small"

Result​

  • Customer selects Red / Small → Shows images 1-4
  • Customer selects Red / Medium → Shows images 1-4
  • Customer selects Red / Large → Shows images 1-4
  • Customer selects Blue / Small → Shows images 5-8
  • Customer selects Blue / Medium → Shows images 5-8
  • Customer selects Blue / Large → Shows images 5-8

Example 2: Shoes with Color Variations​

Product Setup​

Product: "Running Shoes" Variants:

  • Black / 8 / Mesh
  • Black / 9 / Mesh
  • White / 8 / Leather
  • White / 9 / Leather

Images Needed​

  • 6 images per color-material combination (12 total)

Alt Text Setup​

Black Mesh​

"Black mesh running shoe side view variant-black-8-mesh"
"Black mesh running shoe top view variant-black-8-mesh"
"Black mesh running shoe sole detail variant-black-8-mesh"
"Black mesh running shoe in action variant-black-8-mesh"
"Black mesh running shoe close-up variant-black-8-mesh"
"Black mesh running shoe on feet variant-black-8-mesh"

White Leather​

"White leather running shoe side view variant-white-8-leather"
"White leather running shoe top view variant-white-8-leather"
"White leather running shoe sole detail variant-white-8-leather"
"White leather running shoe in action variant-white-8-leather"
"White leather running shoe close-up variant-white-8-leather"
"White leather running shoe on feet variant-white-8-leather"

Result​

  • Customer selects Black / 8 / Mesh → Shows 6 black mesh images
  • Customer selects Black / 9 / Mesh → Shows 6 black mesh images
  • Customer selects White / 8 / Leather → Shows 6 white leather images
  • Customer selects White / 9 / Leather → Shows 6 white leather images

Example 3: Simple Product (Color Only)​

Product Setup​

Product: "Coffee Mug" Variants:

  • Red
  • Blue
  • Green

Images Needed​

  • 3 images per color (9 total)

Alt Text Setup​

Red Mug​

"Red coffee mug front view variant-red"
"Red coffee mug with coffee variant-red"
"Red coffee mug handle detail variant-red"

Blue Mug​

"Blue coffee mug front view variant-blue"
"Blue coffee mug with coffee variant-blue"
"Blue coffee mug handle detail variant-blue"

Green Mug​

"Green coffee mug front view variant-green"
"Green coffee mug with coffee variant-green"
"Green coffee mug handle detail variant-green"

Result​

  • Customer selects Red → Shows 3 red images
  • Customer selects Blue → Shows 3 blue images
  • Customer selects Green → Shows 3 green images

Example 4: Mixed Tagged and Untagged Images​

Product Setup​

Product: "Leather Wallet" Variants:

  • Brown
  • Black

Images Needed​

  • 4 images per color
  • 2 general images (size chart, care instructions)

Alt Text Setup​

Brown Wallet​

"Brown leather wallet front variant-brown"
"Brown leather wallet open variant-brown"
"Brown leather wallet cards variant-brown"
"Brown leather wallet close-up variant-brown"

Black Wallet​

"Black leather wallet front variant-black"
"Black leather wallet open variant-black"
"Black leather wallet cards variant-black"
"Black leather wallet close-up variant-black"

General Images (no variant tag)​

"Wallet size chart and dimensions"
"Leather care instructions"

Result​

  • Customer selects Brown → Shows 4 brown images + 2 general images (6 total)
  • Customer selects Black → Shows 4 black images + 2 general images (6 total)

Example 5: Complex Product with Special Characters​

Product Setup​

Product: "Designer Dress" Variants:

  • Navy Blue / Extra Small
  • Navy Blue / Extra Large
  • Coral Red / Small

Alt Text Setup​

Remember: Shopify's handleize filter converts:

  • Spaces → hyphens
  • Uppercase → lowercase
  • Special chars removed

So:

  • "Navy Blue" becomes navy-blue
  • "Extra Small" becomes extra-small
  • "Coral Red" becomes coral-red
"Navy blue designer dress front view variant-navy-blue-extra-small"
"Coral red designer dress on model variant-coral-red-small"

Example 6: Hat Lab Use Case (Original Request)​

Product Setup​

Product: Custom Embroidered Hat Variants (for each design):

  • Design A / Color 1 / Size S
  • Design A / Color 1 / Size M
  • Design A / Color 2 / Size S

Images Needed​

  • 4-6 images per design-color combination

Alt Text Setup​

"Design A red hat front view variant-design-a-color-1-s"
"Design A red hat side view variant-design-a-color-1-s"
"Design A red hat back view variant-design-a-color-1-s"
"Design A red hat on model variant-design-a-color-1-s"
"Design A red hat detail embroidery variant-design-a-color-1-s"
"Design A red hat lifestyle shot variant-design-a-color-1-s"

Result​

Each design-color combination shows its own set of 4-6 images, making it clear what the customer is ordering.

Tips for Bulk Tagging​

If you have many products to tag:

  1. Export your products from Shopify Admin
  2. Add variant tags to alt text in spreadsheet
  3. Import back to Shopify

Or use Shopify Admin bulk editor:

  1. Products → Select products
  2. Bulk Editor
  3. Add column for "Alt text"
  4. Edit all at once